<template>
  <Add @toparent="add" />
  <Run :torun="todolist" @toParentDel="del" @toParentDblXian="dblxian" @toParentYin="Yin" :RunNum="totalrun" />
  <Com :tocom="todolist" @toParentDel="del" :ComNum="totalcom" />
  <Ftr @clear="clear" />
</template>

<script setup>
import { ref, nextTick, watch, computed } from 'vue'
import Add from './Add.vue';
import Run from './Running.vue';
import Com from './Complate.vue';
import Ftr from './Footer.vue';

// 数据源-Todolist
let todolist = ref(JSON.parse(localStorage.getItem('todolist')) || [])
// 添加
function add(val) {
  todolist.value.push({ title: val, flag: false, checked: false })
}
// 单删
function del(val) {
  todolist.value.splice(val, 1)
}
// 双击显示input边框&自动获焦
function dblxian(obj) {
  console.log(obj);
  // 双击显示input边框
  todolist.value[obj.idx].flag = true
  // 自动获焦
  nextTick(() => {
    obj.dom[obj.idx].focus()
  })
}
// 点击隐藏input框
function Yin(idx) {
  todolist.value[idx].flag = false
}
// 监听数据源Todolist
watch(todolist, (newval, oldval) => {
  save('todolist', todolist.value)
}, {
  deep: true
})
// 本地存数据方法
function save(key, value) {
  localStorage.setItem(key, JSON.stringify(value))
}
// 清空本地数据
function clear() {
  localStorage.clear()
  todolist.value = []
}
// 正在进行的数量
let totalrun = computed(() => {
  return todolist.value.filter((item) => !item.checked).length
})
// 已经完成的数量
let totalcom = computed(() => {
  return todolist.value.filter((item) => item.checked).length
})
</script>
<style>
@import url(../../assets/css/todolist.css);
</style>
